<template>
  <div class="amend">
    <div class="hang">
      <div class="title">当前密码：</div>
      <div class="inp">
        <el-input
          v-model="name.old_password"
          type="password"
          placeholder="请输入当前密码"
          show-password
          @change="chance"
        />
      </div>
      <img src="../../assets/dui.png" alt="" class="dui" v-if="xs" />
      <img src="../../assets/cuo.png" alt="" class="dui" v-if="xs1" />
    </div>
    <div class="hang">
      <div class="title">新密码：</div>
      <div class="inp">
        <el-input
          v-model="name.password"
          type="password"
          placeholder="请输入新密码"
          show-password
        />
      </div>
      <div class="foot">6～16位</div>
    </div>
    <div class="hang">
      <div class="title">确认密码：</div>
      <div class="inp">
        <el-input
          v-model="name.password_confirm"
          type="password"
          placeholder="请输入当前密码"
          show-password
        />
      </div>
      <div class="foot">6～16位</div>
    </div>
    <div class="wm">
      <div class="btn" style="cursor: pointer" @click="but">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getchangePasswordApi } from '@/api/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const pas = localStorage.getItem('password')
const name = ref({
  old_password: '',
  password: '',
  password_confirm: ''
})
const xs = ref(false)
const xs1 = ref(false)
const chance = () => {
  if (name.value.old_password == pas) {
    xs.value = true
    xs1.value = false
  } else {
    xs.value = false
    xs1.value = true
  }
}
const but = () => {
  getchangePasswordApi(name.value).then(res => {
    console.log(res)
    if (res.data.code == 1) {
      name.value.old_password = ''
      name.value.password = ''
      name.value.password_confirm = ''
      ElMessage({ message: res.data.msg, type: 'success' })
    } else {
      ElMessage({ message: res.data.msg, type: 'error' })
    }

    // router.push('/home/personage/centre')
    // router.push({ path: '/home/personage/centre', query: { id: 1 } })
  })
}
</script>

<style lang="scss" scoped>
.dui {
  width: 16px;
  height: 16px;
}
.amend {
  margin-top: -18px;
  margin-left: -16px;
  width: 800px;
  background-color: #fff;
  padding-top: 8px;
  padding-bottom: 500px;
  .wm {
    margin-top: 60px;
    display: flex;
    width: 100%;
    justify-content: center;
    .btn {
      width: 130px;
      height: 40px;
      border-radius: 60px;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      background-color: #e02020;
    }
  }

  .hang {
    display: flex;
    margin-left: 34px;
    margin-top: 24px;
    .title {
      width: 86px;
      font-size: 14px;
      font-weight: normal;
      color: #000000;
    }
    .inp {
      margin-top: -5px;
      width: 464px;
      height: 32px;
      border-radius: 3px;
      box-sizing: border-box;
      border: 1px solid #dcdcdc;
      margin-right: 10px;
    }
  }
}
</style>
